<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>别踩白块</title>
    <!-- <link rel="stylesheet" href="./lib/noTapWhite.css"> -->
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 100vw;
            height: 100vh;
            background-color: #ffffff;
            box-sizing: border-box;
            overflow: hidden;
        }

        .score {
            position: fixed;
            left: 20px;
            top: 5px;
            font-size: 20px;
            font-weight: bold;
            color: blueviolet;
            z-index: 3;
        }

        #con {
            position: relative;
            top: -100%;
            width: 100%;
            height: 100%;

            border-collapse: collapse;
        }

        .row {
            height: 25%;
            width: 100%;
            box-sizing: border-box;
        }

        .cell {
            float: left;
            height: 100%;
            width: 25%;
            outline: 1px solid #ccc;
        }

        .black {
            background-color: #000000;
        }

        .shadow {
            position: fixed;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);

        }

        button {
            display: inline-block;

            padding: .5em 3em;

            background-image: linear-gradient(blueviolet, aqua);

            border: 1px solid rgba(0, 0, 0, .2);

            border-radius: .3em;

            box-shadow: 0 1px white inset;

            text-align: center;

            text-shadow: 0 1px 1px black;

            color: #ffffff;

            font-weight: bold;

        }
    </style>
</head>

<body>
    <div class="main" onclick="tabBox()">
        <div class="score">
            <h5>score: <span>0</span> </h5>
        </div>
        <div id="con">

        </div>

    </div>
    <div class="shadow">
        <button onclick="start()">开始游戏</button>
    </div>
    <!-- <script src="./lib/noTapWhite.js">
    
</script> -->
    <script>
        let speed = 6

        let timer = 0

        let score = 0

        const shadow = document.querySelector(".shadow")

        const con = document.getElementById("con")
        const scoreDom = document.querySelector("span")

        // 开始游戏
        function start(e) {
            // 去除遮罩层
            shadow.style.display = 'none'

            console.log(con.childNodes.length);

            init()
        }

        // 点击方块
        function tabBox(ev) {

            ev = ev || event
            console.log(ev.target.parentNode);
            judge(ev)

        }

        function init() {
            for (let i = 0; i < 4; i++) {
                createRow()
            }

            timer = setInterval(() => {
                move()
            }, 30);
        }

        // 创建div
        const createDiv = (classname) => {
            let div = document.createElement('div')
            div.className = classname

            return div
        }

        // 创建行
        const createRow = () => {

            let row = createDiv("row")

            let arr = createCell()

            // 添加cell给row
            for (let i = 0; i < arr.length; i++) {
                row.appendChild(createDiv(arr[i]))

            }

            if (con.firstChild == null) {
                con.appendChild(row)
            } else {
                con.insertBefore(row, con.firstChild)
            }


        }

        // 删除row
        const delRow = () => {

            if (con.childNodes.length == 6) {
                con.removeChild(con.lastChild)
            }
        }

        // 创建一个cell类目的数组、其中一个为cell black，其余为cell
        const createCell = () => {
            let temp = ['cell', 'cell', 'cell', 'cell']
            let i = Math.floor(Math.random() * 4)

            temp[i] = "cell black"

            return temp
        }

        // 黑块动起来
        function move() {

            let top = parseInt(window.getComputedStyle(con, null)['top'])


            if (speed + top > 0) {
                top = 0
            } else {
                top += speed
            }

            // 不断改变top值 让他动起来
            con.style.top = top + 'px'

            over(top)

            if (top == 0) {

                createRow()

                con.style.top = '-25%'
                delRow()

            }


        }

        // 判断游戏是否结束
        const over = (top) => {

            let rows = con.childNodes

            if (top == 0 && rows[rows.length - 2].passB !== 1) {
                fail()
            }

            for (let i = 0; i < rows.length; i++) {
                if (rows[i].passW == 1) {
                    fail()
                }

            }

        }

        // 游戏结束
        const fail = () => {
            clearInterval(timer)
            shadow.style.display = 'flex'

            con.innerHTML = ""
            con.style.top = "-100vh"
            scoreDom.innerHTML = 0
            confirm("很遗憾勇士,就到这里了,你的最终分数是: " + score)
            score = 0
            speed = 6
            console.log("游戏结束");

        }

        // 判断点击黑块还是白块
        const judge = (e) => {

            if (e.target.className.indexOf('black') == -1
                && e.target.className.indexOf('cell') !== -1
            ) {
                console.log("点白块");
                // 表示白块已被点击
                e.target.parentNode.passW = 1
            }

            if (e.target.className.indexOf('black') > 0) {
                updateScore()
                console.log("点黑块");
                e.target.className = 'cell'

                e.target.parentNode.passB = 1
                console.log(e.target.parentNode.passB);
            }
        }

        // 更新分数
        function updateScore() {

            score = parseInt(scoreDom.innerHTML) + 1

            scoreDom.innerHTML = score

            if (score % 10 == 0) {
                speedUp()
            }

        }

        // 加速函数
        const speedUp = () => {
            speed += 2
            console.log(speed);
            if (speed == 20) {
                alert("开启超神模式")
            }
        }
    </script>

    <body>

</html>